<template>
  <n-space vertical>
    <n-space>
      <SearchForm @handleSearch="handlePageQuery" :searchModel="pageQueryParam.param">
        <n-form-item label="用户名:" path="username">
          <n-input round clearable placeholder="请输入用户名" v-model:value="pageQueryParam.param.username"/>
        </n-form-item>
        <n-form-item label="权限:" path="auth">
          <n-select :style="`width: ${config.selectWidth}px`" clearable :options="userAuthOptions" placeholder="请选择权限"
                    v-model:value="pageQueryParam.param.auth"/>
        </n-form-item>
      </SearchForm>
    </n-space>
    <n-space>
      <AddButton @handleAdd="showAddModal = true"/>
    </n-space>
    <n-space>
      <PageTable @handlePageQuery="handlePageQuery" :columns="columns" :loading="loading" :pageResult="pageResult"/>
    </n-space>

    <UpdateModal :showModal="showAddModal" :paramModel="addUserParam" :rules="addRules" @handleSubmit="handleAdd" @clearParam="clearAddParam">
      <n-form-item label="用户名" path="username">
        <n-input v-model:value="addUserParam.username" size="large" placeholder="请输入用户名" clearable/>
      </n-form-item>
      <n-form-item label="密码" path="pwd">
        <n-input v-model:value="addUserParam.pwd" size="large" placeholder="请输入密码" type="password" show-password-on="click" clearable/>
      </n-form-item>
      <n-form-item label="确认密码" path="repeatPwd">
        <n-input v-model:value="addUserParam.repeatPwd" size="large" placeholder="请再次输入密码" type="password" show-password-on="click" clearable/>
      </n-form-item>
      <n-form-item label="权限" path="auth">
        <n-select v-model:value="addUserParam.auth" placeholder="请选择权限" :options="userAuthOptions"/>
      </n-form-item>
    </UpdateModal>

    <UpdateModal :showModal="showUpdateModal" :paramModel="updateUserParam" :rules="updateRules" @handleSubmit="handleUpdate"
                 @clearParam="clearUpdateParam">
      <n-form-item label="用户名" path="username">
        <n-input v-model:value="updateUserParam.username" size="large" placeholder="请输入用户名" clearable/>
      </n-form-item>
      <n-form-item label="权限" path="auth">
        <n-select v-model:value="updateUserParam.auth" placeholder="请选择权限" :options="userAuthOptions"/>
      </n-form-item>
    </UpdateModal>

  </n-space>
</template>

<script lang="ts" setup>
import {h, reactive, onMounted, toRefs} from "vue";
import UserApi from "../api/UserApi";
import {AddUserParam, PageQueryUserParam, JobUserVO, basicColumns, addRules, updateRules, UpdateUserParam} from "../model/User";
import {PageQuery, PageResult} from "../model/Common";
import SearchForm from "../components/table/SearchForm.vue";
import UpdateButton from "../components/table/UpdateButton.vue";
import AddButton from "../components/table/AddButton.vue";
import SwitchButton from "../components/table/SwitchButton.vue";
import PageTable from "../components/table/PageTable.vue";
import config from "../util/config";
import Rsa from "../util/rsa";
import store from "../store";
import {FormItemRule} from "naive-ui";

const userAuthOptions = store().enumOptionStore.UserAuth;

const checkRepeatPwdRule = {
  message: "两次输入的密码不一致",
  validator: (_rule: FormItemRule, value: string): boolean => {
    return data.addUserParam.pwd === value;
  },
  trigger: ["blur"]
};

addRules.repeatPwd.push(checkRepeatPwdRule as any);

const data = reactive({
  pageQueryParam: new PageQuery<PageQueryUserParam>(new PageQueryUserParam()),
  pageResult: new PageResult<JobUserVO>(),
  addUserParam: new AddUserParam(),
  updateUserParam: new UpdateUserParam(),
  showAddModal: false,
  showUpdateModal: false,
  loading: false
});

const handleAdd = (): void => {
  UserApi.addUser(Rsa(JSON.stringify(data.addUserParam))).then(() => {
    clearAddParam();
    handlePageQuery();
  });
}
const handleUpdate = (): void => {
  UserApi.updateUser(data.updateUserParam).then(() => {
    clearUpdateParam();
    handlePageQuery();
  });
}

const clearAddParam = (): void => {
  data.addUserParam = {} as AddUserParam;
  data.showAddModal = false;
}

const clearUpdateParam = (): void => {
  data.updateUserParam = {} as UpdateUserParam;
  data.showUpdateModal = false;
}

const handlePageQuery = (page?: number, size?: number): void => {
  if (page) {
    data.pageQueryParam.page = page;
  }
  if (size) {
    data.pageQueryParam.size = size;
  }
  data.loading = true;
  UserApi.pageList(data.pageQueryParam)
      .then(response => {
        if (response) {
          data.pageResult = response;
        }
        data.loading = false;
      });
};

const showUpdate = (rowData: JobUserVO): void => {
  data.updateUserParam.id = rowData.id;
  data.updateUserParam.auth = rowData.auth;
  data.updateUserParam.username = rowData.username;
  data.showUpdateModal = true;
}

const handleChange = (id: bigint, enabled: boolean): void => {
  UserApi.changeUser(id, enabled).then(() => {
    handlePageQuery();
  });
}

const enabledColumn = {
  title: "是否启用",
  key: "enabled",
  width: config.oneButtonColumnWidth,
  render: (rowData: JobUserVO) => {
    return [
      h(SwitchButton, {onHandleChange: (active: boolean) => handleChange(rowData.id as bigint, active), active: rowData.enabled})
    ];
  }
}

const optionsColumn = {
  title: "操作",
  key: "options",
  width: config.oneButtonColumnWidth,
  render: (rowData: JobUserVO) => {
    return [
      h(UpdateButton, {onShowUpdate: () => showUpdate(rowData)})
    ];
  }
};

const columns = [...basicColumns, enabledColumn, optionsColumn];
const {pageQueryParam, pageResult, addUserParam, updateUserParam, showAddModal, showUpdateModal, loading} = toRefs(data);

onMounted(() => {
  handlePageQuery();
});
</script>